<template>
  <div class="app-container">
    <list-page
      :total="total"
      v-model:page-num="searchForm.pageNum"
      v-model:page-size="searchForm.pageSize"
      @getList="getList">
      <template #search>
        <list-search v-model="searchForm" @search="search">
          <el-form-item label="公告标题" prop="like.title" class="w-220px">
            <el-input v-model="searchForm.like.title" placeholder="请输入公告标题" clearable @keyup.enter="search" />
          </el-form-item>
          <el-form-item label="操作人员" prop="like.create_by" class="w-220px">
            <el-input
              v-model="searchForm.like.create_by"
              placeholder="请输入操作人员"
              clearable
              @keyup.enter="search" />
          </el-form-item>
          <el-form-item label="类型" prop="where.type" class="w-150px">
            <el-select v-model="searchForm.where.type" placeholder="公告类型" clearable>
              <el-option v-for="dict in sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </list-search>
      </template>

      <template #actions>
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPerm="['system:notice:add']"
          >新增</el-button
        >
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="selections.length !== 1"
          @click="handleEdit"
          v-hasPerm="['system:notice:edit']"
          >修改</el-button
        >
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="!selections.length"
          @click="handleDelete"
          v-hasPerm="['system:notice:delete']"
          >删除</el-button
        >
      </template>

      <el-table v-loading="loading" :data="listData" @selection-change="handleSelection">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" prop="id" width="60" />
        <el-table-column label="公告标题" align="center" prop="title" show-overflow-tooltip />
        <el-table-column label="公告类型" align="center" prop="type" width="100">
          <template #default="scope">
            <dict-tag :options="sys_notice_type" :value="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column label="创建者" align="center" prop="create_by" />
        <el-table-column label="创建时间" align="center" prop="create_time" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ parseTime(scope.row.create_time, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status">
          <template #default="scope">
            <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding" width="140">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)" v-hasPerm="['system:notice:edit']"
              >修改</el-button
            >
            <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDelete(scope.row)"
              v-hasPerm="['system:notice:delete']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </list-page>
    <notice-form v-model="formShow" :module-name="moduleName" :row="formData" @submit="getList" v-if="formShow" />
  </div>
</template>

<script setup name="Notice">
  import { listNoticeApi, delNoticeApi } from '@/api/system/notice'
  import { useListPage } from '@/utils/hook/list-page'
  import NoticeForm from './form.vue'

  const { proxy } = getCurrentInstance()
  const {
    moduleName,
    listData,
    loading,
    total,
    searchForm,
    getList,
    selections,
    search,
    handleSelection,
    formData,
    formShow,
    handleAdd,
    handleEdit,
    handleDelete
  } = useListPage({ module: '公告', listFn, deleteFn })
  const { sys_normal_disable, sys_notice_type } = proxy.useDict('sys_normal_disable', 'sys_notice_type')

  onMounted(() => {
    getList()
  })

  // 查询列表
  function listFn() {
    loading.value = true
    listNoticeApi(searchForm.value).then(res => {
      listData.value = res?.list || []
      total.value = res?.total || 0
      loading.value = false
    })
  }

  // 删除操作
  function deleteFn(params) {
    delNoticeApi(params?.id || '').then(() => {
      proxy.$modal.msgSuccess(res?.msg || '删除成功')
      getList()
    })
  }
</script>
